<!--学生人员管理-->
<template>
  <div class="avue-crud">
    <basic-container>
      <p class="contain-title">学生概况</p>
      <div :style="{width: '370px', height: '370px'}" class="count-box">
        <div id="extern" style="width: 370px;height: 370px"></div>
      </div>
      <!--      <div class="count-box" :style="{width: '370px', height: '370px'}">-->
      <!--        <div id="board" style="width: 370px;height: 370px"></div>-->
      <!--      </div>-->
      <div class="door-search">
        <p>搜索人员</p>
        <el-input v-model="input" class="search-style" placeholder="姓名/手机"></el-input>
        <el-button icon="el-icon-search" type="success">搜索</el-button>
        <el-button type="warning">重置</el-button>
        <el-button type="danger">批量删除</el-button>
        <el-button type="primary" @click="addItemVisible = true">新增人员</el-button>
        <el-button type="info">全选</el-button>
      </div>

      <div class="door-search">
        <p>筛选</p>
        <p>性别</p>
        <el-select v-model="value1" class="select-style" multiple placeholder="请选择">
          <el-option
              v-for="item in selects"
              :key="item.value"
              :label="item.label"
              :value="item.value">
          </el-option>
        </el-select>
        <p>年级</p>
        <el-select v-model="value1" class="select-style" multiple placeholder="请选择">
          <el-option
              v-for="item in selects"
              :key="item.value"
              :label="item.label"
              :value="item.value">
          </el-option>
        </el-select>
        <p>班级</p>
        <el-select v-model="value1" class="select-style" multiple placeholder="请选择">
          <el-option
              v-for="item in selects"
              :key="item.value"
              :label="item.label"
              :value="item.value">
          </el-option>
        </el-select>
        <p>状态</p>
        <el-select v-model="value1" class="select-style" multiple placeholder="请选择">
          <el-option
              v-for="item in selects"
              :key="item.value"
              :label="item.label"
              :value="item.value">
          </el-option>
        </el-select>
        <p>属性</p>
        <el-select v-model="value2" class="select-style" multiple placeholder="请选择">
          <el-option
              v-for="item in selects"
              :key="item.value"
              :label="item.label"
              :value="item.value">
          </el-option>
        </el-select>
        <p>微信绑定情况</p>
        <el-select
            v-model="value3"
            class="select-style"
            collapse-tags
            multiple placeholder="请选择">
          <el-option
              v-for="item in selects"
              :key="item.value"
              :label="item.label"
              :value="item.value">
          </el-option>
        </el-select>
      </div>

      <!--    门禁组列表-->
      <el-form>
        <el-form-item>
          <el-table ref="multipleTable" :data="equipData"
                    style="width: 100%"
                    tooltip-effect="dark"
                    @selection-change="handleSelectionChange">
            <el-table-column label="全选"
                             type="selection"
                             width="55">
            </el-table-column>
            <el-table-column label="人员id" property="id" width="60px"></el-table-column>
            <el-table-column label="姓名" property="name" width="60px"></el-table-column>
            <el-table-column label="学号" property="stunum" width="100px"></el-table-column>
            <el-table-column label="性别" property="sex" width="60px"></el-table-column>
            <el-table-column label="年级" property="grade" width="60px"></el-table-column>
            <el-table-column label="班级" property="class" width="60px"></el-table-column>
            <el-table-column label="学生属性" property="stuattr" width="100px"></el-table-column>
            <el-table-column label="楼栋" property="build" width="60px"></el-table-column>
            <el-table-column label="宿舍号" property="dorm" width="60px"></el-table-column>
            <el-table-column label="人脸照片" property="photo"></el-table-column>
            <el-table-column label="可通行门禁" property="access" width="100px"></el-table-column>
            <el-table-column label="时间方案" property="timeplan" width="100px"></el-table-column>
            <el-table-column label="人员修改时间" property="modtime"></el-table-column>
            <el-table-column label="修改操作人" property="modpeople"></el-table-column>
            <el-table-column label="微信绑定" property="wechat" width="80px"></el-table-column>
            <el-table-column label="状态" property="state" width="60px"></el-table-column>
            <el-table-column label="操作" property="opera">
              <template slot-scope="scope">
                <el-button
                    size="mini"
                    @click="handleEdit(scope.$index, scope.row)">编辑
                </el-button>
                <el-button
                    size="mini"
                    type="danger"
                    @click="handleDelete(scope.$index, scope.row)">删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-form-item>
      </el-form>

      <el-pagination
          :total="1000"
          background
          layout="prev, pager, next">
      </el-pagination>
    </basic-container>

    <!--    新增人员弹窗-->
    <el-dialog
        :visible.sync="addItemVisible"
        center
        title="新增人员"
        width="40%" @close="dictItemVisible">
      <div class="upload-photo">
        <el-upload
            :before-upload="beforeAvatarUpload"
            :on-success="handleAvatarSuccess"
            :show-file-list="false"
            action="https://jsonplaceholder.typicode.com/posts/"
            class="avatar-uploader">
          <img v-if="imageUrl" :src="imageUrl" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
        <!--        <div class="door-search">-->
        <!--          <p>家长手机号</p>-->
        <!--          <el-input v-model="input" placeholder="" class="people-style"></el-input>-->
        <!--&lt;!&ndash;          <p>注：手机号用作推送，多个手机号请用","分隔</p>&ndash;&gt;-->
        <!--        </div>-->
        <!--        <div class="door-search">-->
        <!--          <p>宿舍号</p>-->
        <!--          <el-input v-model="input" placeholder="" class="people-style"></el-input>-->
        <!--        </div>-->
      </div>
      <div class="people-info">
        <div class="door-search">
          <p>姓名</p>
          <el-input v-model="input" class="people-style" placeholder=""></el-input>
        </div>
        <div class="door-search">
          <p>学号</p>
          <el-input v-model="input" class="people-style" placeholder="宿舍号"></el-input>
        </div>
        <div class="door-search">
          <p>年级</p>
          <el-select v-model="value1" class="people-style" multiple placeholder="请选择">
            <el-option
                v-for="item in selects"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
        </div>
        <div class="door-search">
          <p>学生属性</p>
          <el-select v-model="value1" class="people-style" multiple placeholder="请选择">
            <el-option
                v-for="item in selects"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
        </div>
        <div class="door-search">
          <p>性别</p>
          <el-select v-model="value1" class="people-style" multiple placeholder="请选择">
            <el-option
                v-for="item in selects"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
        </div>
        <div class="door-search">
          <p>班级</p>
          <el-input v-model="input" class="people-style" placeholder="宿舍号"></el-input>
        </div>
        <div class="door-search">
          <p>可通行门禁</p>
          <el-select v-model="value1" class="people-style" multiple placeholder="请选择">
            <el-option
                v-for="item in selects"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
        </div>
        <div class="door-search">
          <p>通行方案</p>
          <el-select v-model="value1" class="people-style" multiple placeholder="请选择">
            <el-option
                v-for="item in selects"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
        </div>
        <div class="door-search">
          <p>楼栋</p>
          <el-select v-model="value1" class="people-style" multiple placeholder="请选择">
            <el-option
                v-for="item in selects"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addItemVisible = false">取消</el-button>
        <el-button @click="addItemVisible = false">保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import echarts from 'echarts'

export default {
  name: "studentMage",
  components: {
    echarts,
  },
  data() {
    return {
      input: '',
      options: [],
      value: [],
      loading: false,
      states: [],
      selects: [{          //多选下拉框
        value: '选项1',
        label: '男'
      }, {
        value: '选项2',
        label: '女'
      },],
      value1: [],
      value2: [],
      value3: [],
      equipData: [{       //门禁组列表
        id: '001',
        name: '北门',
        stunum: '6',
        sex: '是',
        grade: '',
        class: '',
        stuattr: '北门',
        build: '6',
        dorm: '是',
        photo: '',
        access: '',
        timeplan: '北门',
        modtime: '2020-12-18',
        modpeople: '是',
        wechat: '',
        state: '是',
        opera: ''
      }],
      imageUrl: '',    //照片上传
      addItemVisible: false,
      dictItemVisible: false,
    }
  },
  mounted() {
    this.drawLine();      //加载饼状图数据
  },
  methods: {
    drawLine() {
      // 初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById('extern'))
      // let myChart = this.$echarts.init(document.getElementById('board'))
      // 绘制图表
      myChart.setOption({
        title: {
          text: '走读生年级人数统计',
          left: 'center',
          top: 20,
          textStyle: {
            color: '#1E90FF',
            fontsize: '20px',
            fontWeight: 'normal'
          }
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        series: [{
          name: '访问来源',
          type: 'pie',
          radius: '55%',
          center: ['50%', '50%'],
          data: [
            {value: 335, name: '高一', itemStyle: {normal: {color: '#A3D2F6'}}},
            {value: 310, name: '高二', itemStyle: {normal: {color: '#71D4D4'}}},
            {value: 274, name: '高三', itemStyle: {normal: {color: '#FACFA9'}}},
            {value: 235, name: '初二', itemStyle: {normal: {color: '#CEDD79'}}},
            {value: 400, name: '初三', itemStyle: {normal: {color: '#C3B6E6'}}}
          ].sort(function (a, b) {
            return a.value - b.value;
          }),
          roseType: 'radius',
          label: {
            color: 'rgba(16, 16, 16,100)'    //标注文字颜色
          },
          labelLine: {
            lineStyle: {
              color: 'rgba(163, 210, 240,100)'   //标注线条颜色
            },
            smooth: 0.2,
            length: 10,
            length2: 20
          },
          itemStyle: {
            shadowBlur: 300,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          },
          animationType: 'scale',
          animationEasing: 'elasticOut',
          animationDelay: function (idx) {
            return Math.random() * 200;
          }
        }]
      });
    },
    remoteMethod(query) {
      if (query !== '') {
        this.loading = true;
        setTimeout(() => {
          this.loading = false;
          this.options = this.list.filter(item => {
            return item.label.toLowerCase()
                .indexOf(query.toLowerCase()) > -1;
          });
        }, 200);
      } else {
        this.options = [];
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleEdit(index, row) {
      console.log(index, row);
    },
    handleDelete(index, row) {
      console.log(index, row);
    },
    //上传头像
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    }
  },

}
</script>

<style scoped>
.count-box {
  background: #ffffff;
}

.count-title {
  color: #1890FF;
}

.contain-title {
  font-weight: bold;
}

.door-search p {
  font-size: 14px;
  display: inline-block;
  margin-right: 20px;
}

.search-style {
  width: 15%;
  margin-right: 20px;
}

.select-style {
  width: 10% !important;
  margin-right: 20px;
}

/*头像上传*/
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}

.upload-photo {
  margin-left: 50px;
  display: inline-block;
  float: left;
}

.people-info {
  margin-left: 70px;
  display: inline-block;
}

.people-style {
  width: 70% !important;
  display: inline-block;
  float: right;
}
</style>